<html lang="en">

<head th:include="templates/common :: header" /> 

<body>
	<div class="container" style="margin-top: 40px;">
		<div th:include="templates/common :: menu" />
		
		<div class="panel panel-primary">
			<div class="panel-heading" th:text="#{profile.label}"></div>
	  		<div class="panel-body">	
				<form id="profileForm" action="#" th:object="${user}" th:action="@{update}" method="post" class="form-horizontal">
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.firstname}"/>
						<div class="col-lg-3">
							<input id="hiddenID" type="hidden" th:field="*{id}" />
							<input id="hiddenStatus" type="hidden" th:field="*{status}"/>
							<input id="firstName" type="text" class="form-control" th:field="*{firstName}" th:placeholder="#{profile.firstname}" />
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.lastname}"/>
						<div class="col-lg-3">
							<input id="firstName" type="text" class="form-control" th:field="*{lastName}" th:placeholder="#{profile.lastname}" />
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.username}"/>
						<div class="col-lg-3">
							<input id="firstName" type="text" class="form-control" th:field="*{userName}" th:placeholder="#{profile.username}" />
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.email}"/>
						<div class="col-lg-3">
							<input id="firstName" type="text" class="form-control" th:field="*{email}" th:placeholder="#{profile.email}" />
						</div>
					</div>
					
					<div class="form-group" sec:authorize="hasRole('Administrator')">
						<label class="col-lg-2 control-label" th:text="#{profile.role}"/>
						<div class="col-lg-3">
							<select th:field="*{roles.id}" class="chzn-select btn-block" id="roles" style="width: 256px" required="required">
								<option th:each="role : ${allRoles}" th:value="${role.id}"  th:text="${role.roleName}">Access Type 1</option>
							</select>
						</div>
					</div>
					
					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-2">
							<button id="submitProfileEditForm" type="submit" class="btn btn-primary btn-block" th:text="#{app.update.data}" />
						</div>
					</div>			
									
				</form>						
			</div>
		</div>

		<div class="panel panel-primary">
			<div class="panel-heading" th:text="#{profile.password.label}"></div>
  			<div class="panel-body">			
				<form id="profileForm" action="#" th:object="${user}"  th:action="@{password/update}" class="form-horizontal" method="post">
				
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.actual.password}"/>
						<div class="col-lg-3">
							<input id="hiddenID" type="hidden" th:field="*{id}" />	
							<input id="actualPass" type="password" class="form-control" th:field="*{password}" th:placeholder="#{profile.actual.password}" />
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.new.password}"/>
						<div class="col-lg-3">
							<input id="newPass" type="password" class="form-control" th:field="*{newPassword}" th:placeholder="#{profile.new.password}" />
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.retype.password}"/>
						<div class="col-lg-3">
							<input id="retypePass" type="password" class="form-control" th:field="*{rePassword}" th:placeholder="#{profile.retype.password}" />
						</div>
					</div>
					
					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-2">
							<button id="submitProfilePasswordEditForm" type="submit" class="btn btn-primary btn-block" th:text="#{app.update.data}" />
						</div>
					</div>		
				</form>
			</div>
		</div>
	</div>
	
	<script type="text/javascript"> 
		 $(document).ready(function() {
		    $('.chzn-select').select2({});
		 });
	</script>
</body>
</html>